<script setup lang="ts">
import { ref } from 'vue'
import {
  addMemberAddress,
  getMemberAddressDetailAPI,
  putMemberAddressAPI
} from '@/apis/address'
import { onLoad } from '@dcloudio/uni-app'
// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(页面展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0 // 默认地址，1为是，0为否
})

// 导航的标题文字
const query = defineProps<{
  id: string
}>()

// console.log(query.id, 11111)
// 设置标题
uni.setNavigationBarTitle({
  title: query.id ? '修改地址' : '新建地址'
})

// 选择地区列表
const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
  // console.log(e.detail)
  // 页面展示
  form.value.fullLocation = e.detail.value.join(' ')
  if (e.detail.code) {
    // 将数据发送给服务器
    form.value.provinceCode = e.detail.code[0]
    form.value.cityCode = e.detail.code[1]
    form.value.countyCode = e.detail.code[2]
  }
}
// 当开关选择时
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {
  // console.log(e.detail)
  form.value.isDefault = e.detail.value ? 1 : 0
}
// 获取 uni-forms 组件对象
const formRef = ref<UniHelper.UniFormsInstance>()

// 表单提交
const onSubmit = async () => {
  try {
    await formRef?.value?.validate?.()
    if (query.id) {
      // 编辑
      await putMemberAddressAPI(query.id, form.value)
    } else {
      // 新增
      // 发送请求
      await addMemberAddress(form.value)
    }
    // 回退到上一个页面
    uni.navigateBack()
  } catch (error) {
    // 提示信息
    uni.showToast({
      icon: 'error',
      title: '请填写完整的信息'
    })
  }
}

// 表单校验的规则
const rules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人的信息' }]
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入收货人的手机号码' },
      {
        pattern:
          /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
        errorMessage: '请输入合法的手机号码'
      }
    ]
  },
  fullLocation: {
    rules: [{ required: true, errorMessage: '请选择所在的地区' }]
  },
  address: {
    rules: [{ required: true, errorMessage: '请输入收货人的地址' }]
  }
}

// 获取地址的详情数据
const getMemberAddressDetail = async () => {
  // 判断是否有 query.id 如果有id 就表示是编辑
  if (query.id) {
    const res = await getMemberAddressDetailAPI(query.id)
    // console.log(res.result)
    Object.assign(form.value, res.result)
  }
}

onLoad(() => {
  getMemberAddressDetail()
})
</script>

<template>
  <!-- 1. 需要将 form 组件标签 修改为 uni-forms 标签 -->
  <!-- 2. 需要在 uni-forms 组件标签上面 添加2个属性 :rules :model  -->
  <!-- :rules 表单字段的校验规则  :model 绑定的表单的数据 -->
  <!-- 3. 需要将 uni-forms 里面的 view 标签修改为 uni-forms-item 组件标签 同时需要给其添加 name属性 name属性的值 就是我们需要校验的表单数据项目 -->
  <!-- 4. 给 uni-forms 添加 ref属性 在表单提交时 使用 ref的名字.value.validate() 方法 -->
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
        <input
          class="input"
          placeholder="请填写收货人姓名"
          v-model="form.receiver"
        />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="contact">
        <text class="label">手机号码</text>
        <input
          class="input"
          placeholder="请填写收货人手机号码"
          v-model="form.contact"
        />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="fullLocation">
        <text class="label">所在地区</text>
        <picker
          class="picker"
          mode="region"
          :value="form.fullLocation.split(' ')"
          @change="onRegionChange"
        >
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item class="form-item" name="address">
        <text class="label">详细地址</text>
        <input
          class="input"
          placeholder="街道、楼牌号等信息"
          v-model="form.address"
        />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          class="switch"
          color="#27ba9b"
          :checked="form.isDefault === 1"
          @change="onSwitchChange"
        />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
